<template>
    <div class="answer">
        <div v-for="(item,index) in replyList" :key="index">
            <el-card style="height: 22%;width: 17%;float:left;margin:20px">
        <div style="float:left;width:175px;height:149px;background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);">
              <font style="margin-left:44px;margin-top:20px;font-size:25px;color:#F08080">{{item.replyName}}</font>
              <el-button style="margin-left:38px;margin-top:80px" type="success" @click="join(item)" round>立即进入</el-button>
        </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            replyList:[]
        }
    },
    methods:{
        findAll(){
            this.$http({
              url: this.$http.adornUrl(`/reply/replygroup/list/`),
              method: 'post',
              data: this.$http.adornData({
                  'isStart': 1
              })
            }).then(({data}) => {
              this.replyList = data.page.list;
            })
        },
        join(item){
            if(item.replyName=='随机答题'){
                this.$http({
                url: this.$http.adornUrl(`/reply/subject/immediately/${item.id}`),
                method: 'post',
                data: this.$http.adornData({
                })
                }).then(({data}) => {
                })
            }
            this.$router.push({path:'reply-reply',query: {data: JSON.stringify(item)}})
        }
    },
    mounted(){
        this.findAll()
    }
}
</script>

<style>
.answer{
    position:fixed;
    width:84%;
    height:83%;
    background:url("../../../assets/img/answer.png");
    opacity: 80%;
    background-size:100% 100%;
}
</style>
